import React from "react";
import { Image, Typography } from "antd";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { UseLink } from "../../container";
import styles from "./ProductImage.module.css";
interface Props extends RouteComponentProps {
  id: number | string;
  size: "large" | "small";
  title: string;
  imageUrl: string;
  price: string | number;
}
const ProductImages: React.FC<Props> = (props) => {
  const { size, title, imageUrl, price, id } = props;
  return (
    <UseLink to={`detail/${id}`}>
      {size === "large" ? (
        <Image
          src={imageUrl}
          height={285}
          width={490}
          preview={false}
          className={styles["imagesUrl"]}
        />
      ) : (
        <Image
          src={imageUrl}
          height={120}
          width={240}
          preview={false}
          className={styles["imagesUrl"]}
        />
      )}
      <Typography.Text type="secondary" ellipsis={true}>
        <span className={styles["typography-title"]}>
          {size === "small"
            ? title.slice(0, 18) + "..."
            : title.slice(0, 40) + "......"}
        </span>
      </Typography.Text>
      <Typography.Text type="danger" ellipsis={true} strong>
        <span className={styles["price"]}>{"$" + price}</span>
      </Typography.Text>
    </UseLink>
  );
};
export const ProductImage = withRouter(ProductImages);
